
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>小黑记事本</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta name="robots" content="noindex, nofollow" />
  <meta name="googlebot" content="noindex, nofollow" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" type="text/css" href="./css/Bookindex.css" />
</head>

<body>
<!-- 主体区域 -->
<section id="todoapp">
  <!-- 输入框 -->
  <header class="header">
    <h1>小黑记事本</h1>
    <input
            autofocus="autofocus"
            autocomplete="off"
            placeholder="请输入任务"
            class="new-todo"
            v-model="content"
            @keyup.enter="addMsg"
    />
  </header>
  <!-- 列表区域 -->
  <section class="main">
    <ul class="todo-list">
      <li class="todo" v-for="(item,index) in msg">
        <div class="view">
          <span class="index">{{index+1}}.</span> <label>{{item}}</label>
          <button class="destroy" @click="del(index)"></button>
        </div>
      </li>

    </ul>
  </section>
  <!-- 统计和清空 -->
  <footer class="footer">
    <span class="todo-count"> <strong>{{msg.length}}</strong> items left </span>
    <button class="clear-completed" @click="cle">
      Clear
    </button>
  </footer>
</section>
<!-- 底部 -->
<footer class="info">
  <p>
    <a href="http://www.baidu.com"
    ><img src="./img/logo.png" alt=""
    /></a>
  </p>
</footer>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../js/vue.js"></script>

</body>
<script>
  let app=new Vue({
    el:"#todoapp",
    data:{
      msg:["打地鼠","看电视"],
      //你输入的内容
      content:"",
    },
    methods:{
      addMsg(){
        this.msg.push(this.content)
      },
      del(index){
        this.msg.splice(index,1);
      },
      cle(){
        this.msg=[];
      }
    }
  })
</script>
</html>